<template>
  <div ref='divklinechart' style="height:500px">
    <!--代码名称-->
    <div ref='divsymbol' class="headTitle">
      <div class="name-box">
        <div class="nameWrap">
          <span class="stockName">{{ Name }}</span>
          <span class="exchangeInfo">{{ PairName }}</span>
        </div>
      </div>
    </div>

    <!--k线周期-->
    <div ref='divperiod' class="tabs kLineTabs">
      <p class="tabsTitle">
                <span
                    v-for='(item,index) in Period.Menu'
                    :key='index'
                    :class='{active : item.Name === Period.SelItem.Name}'
                    @click='ChangePeriod(item)'>{{ item.Name }}</span>
      </p>
    </div>

    <!-- k线图 -->
    <div v-show='KLine.IsShow' ref='divkline' class="klineWrap"></div>
    <div v-show='Minute.IsShow' ref='divkminute' class="klineWrap"></div>

    <!-- k线图指标 -->
    <div v-show="Index.IsShow" ref='divindex' class="indexWrap">
            <span
                v-for='(item,index2) in Index.Menu'
                :key="index2"
                class="indexItem"
                @click='ChangeIndex(item)'>
                {{ item.Name }}</span>
    </div>
  </div>
</template>

<script>
import HQChart from 'hqchart'
// import HQChartStyle from 'hqchart/src/jscommon/umychart.style'
import sha256 from "js-sha256"
import moment from 'moment'
import $ from 'jquery'
import {fetchKStockAll} from "@/api/asset";
import websocket from "@/utils/websocket";

var JSCommon = HQChart.Chart;

const API_KEY = 'cdd08f367a7d6f5d231ccf476f87f75d';
const SECRET_KEY = '099a304283d7d0dae08b31754f2ae1e7';

function DefaultData() {
}

DefaultData.GetKlineOption = function () {
  let data =
      {
        Type: '历史K线图',
        //窗口指标
        Windows:
            [
              {Index: "MA", Modify: false, Change: false},
              {Index: "VOL", Modify: false, Change: false},
              {Index: "MACD", Modify: false, Change: false},
            ],
        //Symbol: '600000.sh',
        IsAutoUpdate: false,
        AutoUpdateFrequency: 1000, //数据更新频率 ms
        Language:'EN',
        IsShowRightMenu: false, //右键菜单
        IsApiPeriod: false, //使用Api计算周期

        IsClickShowCorssCursor: true,    //手势点击出现十字光标
        IsCorssOnlyDrawKLine: true,      //十字光标在K线中间
        CorssCursorTouchEnd: true,       //手势离开屏幕十字光标自动隐藏
        EnableScrollUpDown: true,        //允许手势上下操作滚动页面
        CorssCursorInfo: {Left: 0, Right: 2, Bottom: 1, IsShowCorss: true},  //十字光标刻度设置 Left, Right, Bottom十字光标刻度显示设置 0=不显示 1=现在在框外 2=显示在框内

        KLine:
            {
              DragMode: 1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
              Right: 1, //复权 0 不复权 1 前复权 2 后复权
              Period: 0, //周期 0 日线 1 周线 2 月线 3 年线
              MaxReqeustDataCount: 1000, //日线数据最近1000天
              // MaxRequestMinuteDayCount: 15,    //分钟数据最近15天
              PageSize: 100, //一屏显示多少数据
              IsShowTooltip: false //是否显示K线提示信息
            },
        //标题设置
        KLineTitle:
            {
              IsShowName: false, //不显示股票名称
              IsShowSettingInfo: false //不显示周期/复权
            },
        //边框
        Border:
            {
              Left: 0, //左边间距
              Right: 1, //右边间距
              Top: 20,
              Bottom: 20,
            },
        //子框架设置
        Frame:
            [
              {SplitCount: 3, IsShowLeftText: false, Custom: [{Type: 0}], SplitType: 1},
              {SplitCount: 3, IsShowLeftText: false,},
              {SplitCount: 3, IsShowLeftText: false,},
            ],

        ExtendChart: [{Name: 'KLineTooltip'}],    //tooltip十字光标提示信息
      };
  return data;
}

DefaultData.GetKMinuteOption = function () {
  let data =
      {
        Type: '历史K线图',
        //窗口指标
        Windows:
            [
              {Index: "EMPTY", Modify: false, Change: false, TitleHeight: 0},
              {Index: "VOL", Modify: false, Change: false},
            ],
        //Symbol: '600000.sh',
        IsAutoUpdate: true,
        AutoUpdateFrequency: 10000, //数据更新频率 ms

        IsShowRightMenu: false, //右键菜单
        IsApiPeriod: true,      //使用Api计算周期

        IsClickShowCorssCursor: true,    //手势点击出现十字光标
        IsCorssOnlyDrawKLine: true,      //十字光标在K线中间
        CorssCursorTouchEnd: true,       //手势离开屏幕十字光标自动隐藏
        EnableScrollUpDown: true,        //允许手势上下操作滚动页面
        CorssCursorInfo: {Left: 0, Right: 2, Bottom: 1, IsShowCorss: true},  //十字光标刻度设置 Left, Right, Bottom十字光标刻度显示设置 0=不显示 1=现在在框外 2=显示在框内

        KLine:
            {
              DragMode: 1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
              Right: 1, //复权 0 不复权 1 前复权 2 后复权
              Period: 0, //周期 0 日线 1 周线 2 月线 3 年线 4 1分钟线
              MaxReqeustDataCount: 1000, //日线数据最近1000天
              MaxRequestMinuteDayCount: 15,    //分钟数据最近15天
              PageSize: 30, //一屏显示多少数据
              IsShowTooltip: false, //是否显示K线提示信息
              DrawType: 4,
            },
        //标题设置
        KLineTitle:
            {
              IsShowName: false, //不显示股票名称
              IsShowSettingInfo: false //不显示周期/复权
            },
        //边框
        Border:
            {
              Left: 0, //左边间距
              Right: 1, //右边间距
              Top: 1,
              Bottom: 20,
            },
        //子框架设置
        Frame:
            [
              {SplitCount: 3, IsShowLeftText: false, Custom: [{Type: 0}], SplitType: 1},    //SplitType：0=自动分割 1=个数分割个数固定分割
              {SplitCount: 3, IsShowLeftText: false,},
              {SplitCount: 3, IsShowLeftText: false,},
            ],

        ExtendChart: [{Name: 'KLineTooltip'}],    //tooltip十字光标提示信息
      };
  return data;
}

DefaultData.GetPeriodType = function (t) {
  const data = {
    4: 1,
    5: 2,
    6: 3,
    7: 4,
    8: 5,
    12: 6,
    0: 8,
    1: 9,
    2: 10
  }
  return data[t]
}

DefaultData.GetPeriod = function ()    //周期菜单
{
  var data =
      [
        {Name: 'time', Period: 4, Type: 0, Min: 1},
        {Name: '1min', Period: 4, Type: 0, Min: 1},
        {Name: '5min', Period: 5, Type: 0, Min: 5},
        {Name: '15min', Period: 6, Type: 0, Min: 15},
        {Name: '30min', Period: 7, Type: 0, Min: 30},
        {Name: '1hour', Period: 8, Type: 0, Min: 60},
        // {Name: '2H', Period: 12, Type: 0, Min: 120},

        {Name: '1day', Period: 0, Type: 1, Min: 0},
        {Name: '1week', Period: 1, Type: 2, Min: 0},
        // {Name: 'M', Period: 2, Type: 3, Min: 0},
      ];

  return data;
}

DefaultData.GetIndexMenu = function () //指标菜单配置
{
  var data =   //ID=指标ID Name=菜单显示的名字  WindowIndex=切换指标对应的窗口索引
      [
        // {Name: '顶部背离', ID: '61c8915d-c456-6ea8-2260-85sd3s6fg5sd', WindowIndex: 0},
        // {Name: '高低区间', ID: '61c8915d-c456-6ea8-2260-5sd22df5a3s1', WindowIndex: 1},
        {Name: 'KDJ', ID: 'KDJ', WindowIndex: 1},
        {Name: 'MACD', ID: 'MACD', WindowIndex: 1},
        {Name: 'RSI', ID: 'RSI', WindowIndex: 1},
        {Name: 'BOLL', ID: 'BOLL', WindowIndex: 0},
        {Name: 'VOL', ID: 'VOL', WindowIndex: 1},
        // {Name: '均线', ID: '均线', WindowIndex: 0},
      ];

  return data;
}

export default {
  name: 'BitKLine',
  props: [
    'DefaultPairName',          //代码
    'DefaultName',              //名称
    'DefaultfloatPrecision',    //小数位数
    'DefaultPeriod',            //周期
  ],
  data() {
    return {
      Symbol: '',
      Name: '',
      PairName: '', //货币代码
      FloatPrecision: 4,   //品种的小数位数
      KLine:  //K线
          {
            JSChart: null,
            Option: DefaultData.GetKlineOption(),
            IsShow: true,
          },

      Minute: //分时 (使用K线面积图来做分时图)
          {
            JSChart: null,
            Option: DefaultData.GetKMinuteOption(),
            IsShow: false,
          },

      Period:     //周期菜单
          {
            Menu: DefaultData.GetPeriod(),       //菜单项
            SelItem: DefaultData.GetPeriod()[6], //当前选中
          },

      Index:      //指标菜单
          {
            Menu: DefaultData.GetIndexMenu(),       //菜单项
            SelItem: DefaultData.GetIndexMenu()[0],
            IsShow: true,
          },
    }
  },

  created() {
    console.log('this.DefaultPairName', this.DefaultPairName)
    if (this.DefaultPairName) this.PairName = this.DefaultPairName;
    if (this.DefaultName) this.Name = this.DefaultName;
    if (this.DefaultfloatPrecision) this.FloatPrecision = parseInt(this.DefaultfloatPrecision);
    if (this.DefaultPeriod) {
      var periodItem = this.GetPeriodInfo(this.DefaultPeriod);
      if (periodItem) this.Period.SelItem = periodItem;
    }
    this.Symbol = this.PairName;
  },

  mounted() {
    this.OnSize();
    this.CreateKLine();
  },

  methods:
      {
        //////////////////////////////////////////////////////////////////////////////////
        //公共对外接口
        //
        /////////////////////////////////////////////////////////////////////////////////

        OnSize()    //动态调整
        {
          var divKLineChart = this.$refs.divklinechart;
          var height = divKLineChart.offsetHeight;
          var width = divKLineChart.offsetWidth;
          var divPeriod = this.$refs.divperiod;
          var divSymbol = this.$refs.divsymbol;
          var divIndex = this.$refs.divindex;
          // divKLineChart.textContent = ''

          var klineHeight = height - divPeriod.offsetHeight - divSymbol.offsetHeight - divIndex.offsetHeight - 4; //总的高度减去其他控件高度就是图形高度
          var divKLine = this.$refs.divkline;
          divKLine.style.width = width + 'px';
          // divKLine.textContent = ''
          divKLine.style.height = klineHeight + 'px';
          if (this.KLine.JSChart) this.KLine.JSChart.OnSize();

          var divKMinute = this.$refs.divkminute;
          var kMinuteHeight = height - divPeriod.offsetHeight - divSymbol.offsetHeight - 4; //总的高度减去其他控件高度就是图形高度
          divKMinute.style.width = width + 'px';
          divKMinute.style.height = kMinuteHeight + 'px';
          if (this.Minute.JSChart) this.Minute.JSChart.OnSize();
        },

        ChangeSymbol(symbol, name, floatPrecision) //切换股票
        {
          console.log('【ChangeSymbol】', symbol, name, floatPrecision)
          // if (this.PairName === symbol) return;
          this.PairName = symbol;
          this.Symbol = symbol;
          this.Name = name;
          this.FloatPrecision = floatPrecision;
          if (this.KLine.JSChart) this.KLine.JSChart.ChangeSymbol(this.Symbol);
          if (this.Minute.JSChart) this.Minute.JSChart.ChangeSymbol(this.Symbol);
        },

        ChangeIndex(item)   //切换指标
        {
          if (this.KLine.JSChart) this.KLine.JSChart.ChangeIndex(item.WindowIndex, item.ID);
        },

        ChangePeriod(item)  // 切换周期
        {
          this.Period.SelItem = item;
          if (item.Name === '分时') {
            if (!this.Minute.JSChart) this.CreateMinute();

            this.Index.IsShow = false;
            this.KLine.IsShow = false;
            this.Minute.IsShow = true;
          } else {
            if (this.KLine.JSChart) this.KLine.JSChart.ChangePeriod(item.Period);
            else this.CreateKLine();

            this.Index.IsShow = true;
            this.KLine.IsShow = true;
            this.Minute.IsShow = false;
          }
        },


        /////////////////////////////////////////////////////////////////////////////////////////////
        // 私有内部函数
        /////////////////////////////////////////////////////////////////////////////////////////////
        CreateKLine() {
          if (this.KLine.JSChart) return;
          // HQChart.Chart
          // JSCommon.JSChart.SetStyle(blackStyle);
          JSCommon.MARKET_SUFFIX_NAME.GetBITDecimal = () => {
            return this.FloatPrecision;
          } // 不同品种虚拟币，使用不同小数位数
          var divKLine = this.$refs.divkline;
          // JSCommon.JSChart
          JSCommon.JSChart.GetResource().FrameLogo.Text = null
          // divKLine.style.backgroundColor = '#000000';
          var getStyleConfig = JSCommon.HQChartStyle.GetStyleConfig(1);
          console.log('JSCommon.HQChartStyle.GetStyleConfig(1)', getStyleConfig)
          this.KLine.JSChart = JSCommon.JSChart.Init(divKLine);
          //rgb(174, 78, 84)
          getStyleConfig.DownBarColor = 'rgb(81,131,92)'
          getStyleConfig.UpBarColor = 'rgb(174, 78, 84)'
          getStyleConfig.MinKLineBarWidth = 3
          JSCommon.JSChart.SetStyle(getStyleConfig);
          // console.log('this.KLine.JSChart', )
          this.KLine.Option.KLine.Period = this.Period.SelItem.Period;
          this.KLine.Option.Symbol = this.Symbol;
          this.KLine.Option.NetworkFilter = (data, callback) => {
            this.NetworkFilter(data, callback);
          };  //网络请求回调函数
          this.KLine.JSChart.SetOption(this.KLine.Option);
        },

        CreateMinute() {
          if (this.Minute.JSChart) return;

          JSCommon.MARKET_SUFFIX_NAME.GetBITDecimal = () => {
            return this.FloatPrecision;
          } // 不同品种虚拟币，使用不同小数位数
          var divKLine = this.$refs.divkminute;
          this.Minute.JSChart = JSCommon.JSChart.Init(divKLine);
          this.Minute.Option.Symbol = this.Symbol;
          this.Minute.Option.NetworkFilter = (data, callback) => {
            this.MinuteNetworkFilter(data, callback);
          };  //网络请求回调函数
          this.Minute.JSChart.SetOption(this.Minute.Option);
        },

        GetPeriodInfo(period) {
          for (var i in this.Period.Menu) {
            var item = this.Period.Menu[i];
            if (item.Period === period) return item;
          }

          return null;
        },

        MinuteNetworkFilter(data, callback) {
          console.log('[BitKLine::NetworkFilter] data', data);
          switch (data.Name) {
            case 'KLineChartContainer::ReqeustHistoryMinuteData':   //分钟全量数据下载
              this.ReqeustHistoryMinuteData(data, callback, {PageSize: 100});
              break;
            case 'KLineChartContainer::RequestMinuteRealtimeData':  //分钟实时数据更新
              this.RequestMinuteRealtimeData(data, callback);
              break;
          }
        },

        NetworkFilter(data, callback)   //第3方数据替换接口
        {
          console.log('[BitKLine::NetworkFilter] data', data);
          switch (data.Name) {
            case 'KLineChartContainer::ReqeustHistoryMinuteData':   //分钟全量数据下载
              this.ReqeustHistoryMinuteData(data, callback, {PageSize: 50});
              break;
            case 'KLineChartContainer::RequestHistoryData':         //日线全量数据下载
              this.RequestHistoryData(data, callback);
              break;
            case 'KLineChartContainer::RequestMinuteRealtimeData':  //分钟实时数据更新
              this.RequestMinuteRealtimeData(data, callback);
              break;
            case 'KLineChartContainer::RequestRealtimeData':        //日线实时数据更新
              this.RequestRealtimeData(data, callback);
              break;
          }
        },
        reverseArray1(arr) {
          var newArr = [];
          for (let index = arr.length - 1; index >= 0; index--) {
            newArr.push(arr[index]);
          }
          return newArr;
        },
        ReqeustHistoryMinuteData(data, callback, option) //第3方分钟线历史数据请求
        {
          data.PreventDefault = true;
          var period = data.Self.Period;    //获取周期
          var symbol = this.Symbol;
          var name = this.Name;
          // var peirodMenu = this.GetPeriodInfo(period)
          // var type = peirodMenu.Type, min = peirodMenu.Min, count = 500;
          // var startDateTime = moment().format('YYYYMMDDHHmmss');
          // var hash = sha256.create();
          // hash.update(API_KEY + this.PairName + type + min + startDateTime + count + SECRET_KEY);
          // var secretHash = hash.hex();
          fetchKStockAll({code: symbol, type: DefaultData.GetPeriodType(period)}).then(res => {
            this.RecvMinuteHistoryData(this.reverseArray1(res.data), callback, {
              Name: name,
              Symbol: symbol,
              Chart: data.Self
            }, option);
          })
          // $.ajax({
          //   url: 'https://bit.zealink.com/api/selectchart',
          //   type: 'post',
          //   data:
          //       {
          //         pairname: this.PairName,
          //         apikey: API_KEY,
          //         type: type,
          //         min: min,
          //         startdatetime: startDateTime,
          //         count: count,
          //         secrethash: secretHash
          //       },
          //   success: (recvData) => {
          //     this.RecvMinuteHistoryData(recvData, callback, {Name: name, Symbol: symbol, Chart: data.Self}, option);
          //   }
          // })
        },

        RecvMinuteHistoryData(recvData, callback, stockData, option) {
          console.log('[BitKLine::RecvMinuteHistoryData]', recvData);
          var klineData = this.JsonToHQChartMinuteHistoryData(recvData);

          var hqChartData = {code: 0, data: klineData};
          hqChartData.symbol = stockData.Symbol;
          hqChartData.name = stockData.Name;
          stockData.Chart.PageSize = option.PageSize;    //设置一屏显示数据个数

          console.log('[BitKLine::RecvMinuteHistoryData] hqchartdata', hqChartData);
          callback(hqChartData);
        },

        RequestHistoryData(data, callback)  //第3方日线历史数据请求
        {
          data.PreventDefault = true;
          var period = data.Self.Period;    //获取周期
          var symbol = this.Symbol;
          var name = this.Name;
          var peirodMenu = this.GetPeriodInfo(period)
          var type = peirodMenu.Type, min = peirodMenu.Min, count = 500;

          var startDateTime = moment().format('YYYYMMDDHHmmss');
          var hash = sha256.create();
          hash.update(API_KEY + this.PairName + type + min + startDateTime + count + SECRET_KEY);
          // var secretHash = hash.hex();
          let vm = this;
          new websocket(function (data) {
            var datum = data.code == symbol ? data : {};
            if(data.code == symbol){
              let {closePrice,
                code,
                  name,
                highPrice,
                lowPrice,
                openPrice,
                price,
                volume} = datum

              // priceflu,
              // turnover,
              // type,
              var stockItem={ symbol:code, name:name};
              var timer = moment(new Date().getTime()).format('YYYYMMDDHHmmss');
              var date = parseInt(Number.parseInt(timer) / 1000000 + "");
              stockItem.time=parseInt(Number.parseInt(timer) % 1000000 / 100 + "");
              stockItem.date=date;
              stockItem.price=parseFloat(price);
              stockItem.yclose=parseFloat(closePrice);
              stockItem.open=parseFloat(openPrice);
              stockItem.high=parseFloat(highPrice);
              stockItem.low=parseFloat(lowPrice);
              stockItem.vol=parseFloat(volume); //单位是股
              stockItem.amount=null;
              var hqChartData={code:0, stock:[stockItem] };
              vm.KLine.JSChart.JSChartContainer.RecvRealtimeData(hqChartData);
            }
          })
          fetchKStockAll({code: symbol, type: DefaultData.GetPeriodType(period)}).then(res => {
            this.RecvHistoryData(this.reverseArray1(res.data), callback, {
              Name: name,
              Symbol: symbol,
              Chart: data.Self
            });
          })
        },

        RecvHistoryData(recvData, callback, stockData) {
          console.log('[BitKLine::RecvHistoryData]', recvData);
          var klineData = this.JsonToHQChartHistoryData(recvData);

          var hqChartData = {code: 0, data: klineData};
          hqChartData.symbol = stockData.Symbol;
          hqChartData.name = stockData.Name;
          stockData.Chart.PageSize = 50;    //设置一屏显示数据个数

          console.log('[BitKLine::RecvHistoryData] hqchartdata', hqChartData);
          callback(hqChartData);
        },

        RequestMinuteRealtimeData(data, callback)    //第3方分钟实时数据更新请求
        {
          data.PreventDefault = true;
          var period = data.Self.Period;    //获取周期
          var symbol = this.Symbol;
          var name = this.Name;
          var peirodMenu = this.GetPeriodInfo(period)
          var type = peirodMenu.Type, min = peirodMenu.Min, count = 2;  //取最新5条数据 分时数据多取几条更新

          var startDateTime = moment().format('YYYYMMDDHHmmss');
          var hash = sha256.create();
          hash.update(API_KEY + this.PairName + type + min + startDateTime + count + SECRET_KEY);
          var secretHash = hash.hex();

          $.ajax({
            url: 'https://bit.zealink.com/api/selectchart',
            type: 'post',
            data:
                {
                  pairname: this.PairName,
                  apikey: API_KEY,
                  type: type,
                  min: min,
                  startdatetime: startDateTime,
                  count: count,
                  secrethash: secretHash
                },
            success: (recvData) => {
              this.RecvMinuteRealtimeData(recvData, callback, {Name: name, Symbol: symbol});
            }
          })
        },

        RecvMinuteRealtimeData(recvData, callback, stockData) {
          console.log('[BitKLine::RecvMinuteRealtimeData]', recvData);

          var klineData = this.JsonToHQChartMinuteHistoryData(recvData);

          var hqChartData = {code: 0, data: klineData, ver: 2.0};  //数字货币使用ver2.0数据格式
          hqChartData.symbol = stockData.Symbol;
          hqChartData.name = stockData.Name;

          console.log('[BitKLine::RecvMinuteRealtimeData] hqchartdata', hqChartData);
          callback(hqChartData);

        },

        RequestRealtimeData(data, callback)  //第3方日线实时数据更新请求
        {
          data.PreventDefault = true;
          var period = data.Self.Period;    //获取周期
          var symbol = this.Symbol;
          var name = this.Name;
          var peirodMenu = this.GetPeriodInfo(period)
          var type = peirodMenu.Type, min = peirodMenu.Min, count = 2;  //取最新2条数据

          var startDateTime = moment().format('YYYYMMDDHHmmss');
          var hash = sha256.create();
          hash.update(API_KEY + this.PairName + type + min + startDateTime + count + SECRET_KEY);
          var secretHash = hash.hex();

          $.ajax({
            url: 'https://bit.zealink.com/api/selectchart',
            type: 'post',
            data:
                {
                  pairname: this.PairName,
                  apikey: API_KEY,
                  type: type,
                  min: min,
                  startdatetime: startDateTime,
                  count: count,
                  secrethash: secretHash
                },
            success: (recvData) => {
              this.RecvRealtimeData(recvData, callback, {Name: name, Symbol: symbol});
            }
          })
        },

        RecvRealtimeData(recvData, callback, stockData) {
          console.log('[BitKLine::RecvRealtimeData]', recvData);

          var stockItem = this.JsonToHQChartRealtimeData(recvData);
          stockItem.symbol = stockData.Symbol;
          stockItem.name = stockData.Name;
          var hqChartData = {code: 0, stock: [stockItem]};

          console.log('[BitKLine::RecvRealtimeData] hqchartdata', hqChartData);
          callback(hqChartData);
        },

        JsonToHQChartMinuteHistoryData(data)  //分钟（历史/最新）数据转化为hqchart数据格式
        {
          // var data = recvData.data.series;
          let yClose = null;
          const klineData = [];
          for (const i in data) {
            const item = data[i];
            // var aryItem = item.split('|');
            // Number.parseFloat()
            // parseInt()

            var timer = moment(item.codeTime * 1000).format('YYYYMMDDHHmmss');
            console.log('timer: ', timer, item.codeTime)
            var date = parseInt(Number.parseInt(timer) / 1000000 + "");
            var time = parseInt(Number.parseInt(timer) % 1000000 / 100 + "");
            var open = parseFloat(item.open);
            var high = parseFloat(item.high);
            var low = parseFloat(item.low);
            var close = parseFloat(item.close);
            var vol = parseFloat(item.volume);
            klineData.push([date, yClose, open, high, low, close, vol, null, time]);
            yClose = close;
          }

          return klineData;
        },
        formatTime(timeStamp) {
          const date = new Date(+timeStamp * 1000);
          const year = date.getFullYear();
          const month = date.getMonth() + 1; // 月份从0开始，需要加1
          const day = date.getDate();
          const hours = date.getHours();
          const minutes = date.getMinutes();
          const seconds = date.getSeconds();
          return `${year}${month.toString().padStart(2, '0')}${day.toString().padStart(2, '0')}${hours}${minutes}${seconds}`;
        },

        JsonToHQChartHistoryData(data)  //日线历史数据转化为hqchart数据格式
        {
          let yClose = null;
          const klineData = [];
          for (const i in data) {
            const item = data[i];
            var timer = moment(item.codeTime * 1000).format('YYYYMMDDHHmmss');
            var date = parseInt(timer / 1000000 + "");
            // var time = parseInt(Number.parseInt(item.codeTime) % 1000000 / 100 + "");
            var open = parseFloat(item.open);
            var high = parseFloat(item.high);
            var low = parseFloat(item.low);
            var close = parseFloat(item.close);
            var vol = parseFloat(item.volume);
            klineData.push([date, yClose, open, high, low, close, vol, null]);

            yClose = close;
          }

          return klineData;
        },

        JsonToHQChartRealtimeData(recvData) //日线最新数据转化为hqchart数据格式
        {
          var stockData = {};
          var data = recvData.data.series;
          var yClose = null;
          for (var i in data) {
            var item = data[i];
            var aryItem = item.split('|');
            stockData.date = parseInt(aryItem[0] / 1000000);
            stockData.open = parseFloat(aryItem[1]);
            stockData.high = parseFloat(aryItem[2]);
            stockData.low = parseFloat(aryItem[3]);
            stockData.price = parseFloat(aryItem[4]);   //收盘价
            stockData.vol = parseFloat(aryItem[5]);
            stockData.yclose = yClose;
            stockData.amount = null;

            yClose = stockData.price;
          }

          return stockData;
        },
      }
}

</script>

<style lang="less">
/*页面头部*/
.name-box {
  flex: 1;
  text-align: center;
  position: relative;
}

.headTitle {
  display: flex;
  box-sizing: border-box;
  padding-top: 4px;
}

.nameWrap {
  text-align: center;
  line-height: 21px;
  font-family: "PingFangSC-Light";
}

.stockName { /*font-family: "PingFang-SC-Heavy";*/
  margin-right: 1.2%;
}

.exchangeInfo {
  font-size: 12px;
  color: #666;
  height: 15px;
  line-height: 15px;
  font-weight: bold;
  text-align: center;
  font-family: "PingFangSC-Light";
}

/*k线部分*/
.blockBg {
  background: #fff;
  margin-top: 5px;
}

.tabsTitle {
  height: 28px;
  line-height: 28px;
  border-bottom: 1px solid #ececec;
  border-top: 1px solid #ececec;
  padding: 0 4%;
  font-size: 1.3rem;
  display: flex;
  flex-direction: row;
}

.tabsTitle span {
  width: 15%;
  height: 27px;
  line-height: 27px;
  border-bottom: 2px solid transparent;
  display: inline-block;
  text-align: center;
  vertical-align: top;
}

.tabsTitle span.active {
  border-bottom-color: #217cd9;
  color: #217cd9;
}

.klineWrap {
  float: left;
  position: relative;
  overflow: hidden;
  background: #0B0E11;
}

.kLineTabs .tabsTitle {
  padding-left: 2%;
  cursor: pointer;
}

.kLineTabs .tabsTitle span {
  font-size: 1.3rem;
  width: 16%;
}

.kLineTabs .tabsTitle span:last-child {
  width: 18%;
}

.indexWrap {
  cursor: pointer;
  width: 100%;
  height: 30px;
  //background-color: #f6fbfe;
  font-size: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.indexWrap .indexItem {
  display: block;
  line-height: 30px;
  flex-grow: 1;
  text-align: center;
}

.indexWrap .indexItem.active {
  color: #333;
  background-color: #e1ecf2;
}
</style>
